<template>
<!--  <el-button plain @click="dialogVisible = true">-->
<!--    Click to open the Dialog-->
<!--  </el-button>-->
<!--  弹窗-->
  <el-dialog
      v-model="dialogVisible"
      title="类型详情"
      width="500"
      :before-close="handleClose"
  >
    <el-form-item label="车辆类型">
    <el-input v-model="vehicleType.type"/>
    </el-form-item>
    <el-form-item label="车辆描述">
      <el-input v-model="vehicleType.description" type="textarea" />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


  <div
      class="user-management-page"
      v-loading="loading"
      element-loading-text="拼命加载中"
  >
    <el-space wrap style="width: 100%">
<!--      <el-input-->
<!--          v-model="conditionForm.name"-->
<!--          class="search-input"-->
<!--          prefix-icon="el-icon-search"-->
<!--          size="small"-->
<!--          placeholder="司机姓名"-->
<!--          clearable-->
<!--          style="width: 200px"-->
<!--      ></el-input>-->
<!--      <el-input-->
<!--          v-model="conditionForm.licenseNumber"-->
<!--          class="search-input"-->
<!--          prefix-icon="el-icon-search"-->
<!--          size="small"-->
<!--          placeholder="驾驶证号"-->
<!--          clearable-->
<!--          style="width: 200px"-->
<!--      ></el-input>-->

<!--      <el-button-->
<!--          type="primary"-->
<!--          size="small"-->
<!--          icon="el-icon-circle-plus-outline"-->
<!--          @click="onTableCondition"-->
<!--      >查询-->
<!--      </el-button-->
<!--      >-->
<!--      <el-button-->
<!--          type="primary"-->
<!--          size="small"-->
<!--          icon="el-icon-circle-plus-outline"-->
<!--          @click="onTableAddClick"-->
<!--      >添加-->
<!--      </el-button-->
<!--      >-->
<!--      <el-button-->
<!--          type="danger"-->
<!--          size="small"-->
<!--          icon="el-icon-delete"-->
<!--          @click="onTopDeleteClick"-->
<!--      >删除-->
<!--      </el-button-->
<!--      >-->
    </el-space>


    <!-- 添加/编辑权限的模态框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="600px" center>
      <el-form :model="form" label-width="80px" center>

<!--        <el-form-item label="车辆ID">-->
<!--          <el-input v-model="form.vehicleTypeId"/>-->
<!--        </el-form-item>-->
        <el-form-item label="最小历程">
          <el-input v-model="form.minDistance"/>
        </el-form-item>
        <el-form-item label="最大里程">
          <el-input v-model="form.maxDistance"/>
        </el-form-item>
        <el-form-item label="单价(元/km)">
          <el-input v-model="form.ratePerKm" placeholder="请输入单价">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="addOrUpdateAPrice">确定</el-button>
            </span>
      </template>
    </el-dialog>

    <!--    表格-->
    <el-table
        :data="dataForTable"
        tooltip-effect="dark"
        :row-style="{ height: '65px' }"
        @selection-change="onTableSelectionChange"
    >
      <el-table-column
          type="selection"
          width="50"
          show-overflow-tooltip
          header-align="center"
          align="center"
      >
      </el-table-column>
      <el-table-column prop="vehicleTypeId" label="车辆类型" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.vehicleTypeId ===1 " type="success"
                  @click="showTheDetail(scope.row)"
                  >小型车</el-tag>
          <el-tag v-if="scope.row.vehicleTypeId ===2 " type="warning"
                  @click="showTheDetail(scope.row)"
          >中型车</el-tag>
          <el-tag v-if="scope.row.vehicleTypeId ===3 " type="info"
                  @click="showTheDetail(scope.row)"
          >大型车</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="minDistance" label="最小运输距离" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="maxDistance" label="最大运输距离" show-overflow-tooltip>
        <template #default="scope">
          <el-tag v-if="scope.row.maxDistance === 9999999 " type="success">无上限</el-tag>
          <el-tag v-if="scope.row.maxDistance ===300 " type="success">300km</el-tag>
          <el-tag v-if="scope.row.maxDistance ===700 " type="success">700km</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ratePerKm" label="单价(元/km)" show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          label="操作"
          show-overflow-tooltip
          min-width="95"
          fixed="right"
      >
        <template #default="scope">
          <el-button
              type="warning"
              size="small"
              @click="onTableEditClick(scope.row)"
          >修改单价
          </el-button>
        </template>
      </el-table-column>
      <template v-slot:empty> 暂无数据</template>
    </el-table>
    <div class="table-pager">
      <el-pagination
          size="small"
          background
          layout="prev, pager, next"
          :total="50"
          class="mt-4"
      />
    </div>
  </div>
</template>
<script>
import axios from "axios";
import {reactive, onMounted, ref, watch, computed} from "vue";

export default {
  name: "driver-management",
  setup(){
    const dataForTable = ref ([]);
    const loading = ref(true)
    const form = ref({
      id: "",
      vehicleTypeId: "",
      minDistance: "",
      maxDistance: "",
      ratePerKm: "",
    });
    const emptyForm = ref({
      id: "",
      vehicleTypeId: "",
      minDistance: "",
      maxDistance: "",
      ratePerKm: "",
    });
    const conditionForm = ref({
      name : "",
      licenseNumber: "",
    });
    const nullConditionForm = ref({
      name : "",
      licenseNumber: "",
    });
    const dialogTitle = ref("")
    const dialogFormVisible = ref(false)
    const dialogVisible = ref(false)
    const vehicleType = ref({
      vehicleType: "",
      description: "",
    })


    // 函数分界线----------------------------------------
    async function findAll() {
      loading.value = true;
      const res = await axios({
        url: "/vehicle/pricing/findAll",
        method: "post",
      });
      console.log(res.data.data);
      dataForTable.value = res.data.data;
      console.log(dataForTable.value)
      loading.value = false;
    }

    async function onTableCondition() {
      const res = await axios({
        url: "/vehicle/driver/findByCondition",
        method: "post",
        data: {
          "name": conditionForm.value.name,
          "licenseNumber": conditionForm.value.licenseNumber,
        }
      })
      console.log(res.data)
      dataForTable.value = res.data.data;
      conditionForm.value = nullConditionForm.value;
    }

    function addOrUpdateAPrice(row) {
      if (dialogTitle.value === "新增信息") {
        addAPrice();
        dialogTitle.value = "";
        form.value = emptyForm.value;
        dialogFormVisible.value = false;
      } else if (dialogTitle.value === "修改单价") {
        updateAPrice(row);
        dialogTitle.value = "";
        form.value = emptyForm.value;
        dialogFormVisible.value = false;
      }
    }
    async function updateAPrice(row) {
      console.log(row.value)
      const res = await axios({
        url: "/vehicle/pricing/updateAMsg",
        method: "post",
        data: {
            "id": form.value.id,
            "vehicleTypeId": form.value.vehicleTypeId,
            "minDistance": form.value.minDistance,
            "maxDistance": form.value.maxDistance,
            "ratePerKm": form.value.ratePerKm,
        }
      });
      console.log(res.data);
    }
    async function addAPrice() {
      console.log("add")
      const res = await axios({
        url: "/vehicle/price/insertAMsg",
        method: "post",
        data: {
          "driver" : form.value
        }
      });
      console.log(res);
      asyncToFindAll();
    }

    function onTableEditClick(row) {
      dialogTitle.value = "修改单价"
      dialogFormVisible.value = true;
      form.value = row;
    }

    async function showTheDetail(row){
      const res =  await axios({
        url: "/vehicle/pricing/findDetailOfType/" + row.vehicleTypeId,
        method: "get",
      });
      console.log(res.data.data);
      vehicleType.value = res.data.data;
      dialogVisible.value = true;
    }

    function asyncToFindAll() {
      findAll();
    }


    findAll();
    //返回值分界线-------------------------------------
    return{
      dataForTable,
      form,
      emptyForm,
      conditionForm,
      nullConditionForm,
      dialogTitle,
      dialogFormVisible,
      dialogVisible,
      vehicleType,

      findAll,
      onTableCondition,
      addOrUpdateAPrice,
      addAPrice,
      updateAPrice,
      asyncToFindAll,
      onTableEditClick,
      showTheDetail,
    }
  }
}
</script>
<style lang="scss" scoped>
.user-management-page {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  overflow: auto;
  position: relative;

  .table-pager {
    width: 100%;
    @include flex-row-center-center;
    padding: 20px 0;
    box-sizing: border-box;
  }
}
</style>